<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吸顶导航特效</title>
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 100%;
        background: #ccc;
        margin: 10px auto 0;
        position: relative;
    }
    .content{
        width: 100%;
        height: 400px;
        background: #0FF2D8;
        margin: 10px auto 0;
        line-height: 400px;

    }
    .navigation{
        width: 100%;
        height: 40px;
        background: #E589B4;
        margin:  auto 0;
        top: 400px;
        left: 0;
        position: absolute;
    }
    .tab{
        width: 180px;
        height: 40px;
        background: #DB3179;
        float: left;
        margin-left: 5px;
        line-height: 40px;
        text-align: center;
    }
    #div1{
        width: 100px;
        height: 100px;
        background: green;
        position: fixed;
        bottom: 0;
        right: 0;
        display: none;
        line-height: 100px;
        text-align: center;

    }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var navigaOffsetTop = 0;
        function my_getElementsByClassName(class_name){
            var arr = [];
            elements = document.getElementsByTagName('*');
            for (var i = 0; i < elements.length; i++) {
                if(elements[i].className == class_name){
                    arr[arr.length] = elements[i];

                }
            }
            return arr;
        }
        //导航条悬停在顶部
        function navigaStayTop(){
            var navigationBar = [];
            if(document.getElementsByClassName){
                navigationBar = document.getElementsByClassName('navigation');
            }else{
                //非标准IE下
                navigationBar = my_getElementsByClassName('navigation');
            }
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (scrollTop > navigaOffsetTop){
                navigationBar[0].style.top = scrollTop + "px";
            } else{
                navigationBar[0].style.top = navigaOffsetTop + "px";
            }
        }
        //给导航条上七个tab加上点击事件
        var tabs = [];
        if(document.getElementsByClassName){
            tabs = document.getElementsByClassName('tab');
        }else{
            tabs = my_getElementsByClassName("tab");
        }

        var contents = [];
        if (document.getElementsByClassName) {
            contents = document.getElementsByClassName('content');

        } else{
            //Ie
            contents = my_getElementsByClassName('content');
        };
        tabs[0].onclick=function(){
        window.scrollTo(0, contents[2].offsetTop);
        }
        tabs[1].onclick=function(){
        window.scrollTo(0, contents[3].offsetTop);
        }
        tabs[2].onclick=function(){
        window.scrollTo(0, contents[4].offsetTop);
        }
        tabs[3].onclick=function(){
        window.scrollTo(0, contents[5].offsetTop);
        }
        tabs[4].onclick=function(){
        window.scrollTo(0, contents[6].offsetTop);
        }
        tabs[5].onclick=function(){
        window.scrollTo(0, contents[7].offsetTop);
        }
        tabs[6].onclick=function(){
        window.scrollTo(0, contents[8].offsetTop);
        }

        //获取页面上导航条到顶部的位置
        var navigationBar = [];
        if (document.getElementsByClassName) {
            navigationBar = document.getElementsByClassName('navigation');

        } else{
            navigationBar = my_getElementsByClassName('navigation');

        }
        navigaOffsetTop = navigationBar[0].offsetTop;


        //给滚动条以及鼠标加上滚动事件
        // window.onscroll= naviga_stay_top;
        // document.onmousewheel= navigaStayTop;
        if(window.attachEvent){
            window.attachEvent("onmousewheel", navigaStayTop);
            window.attachEvent("onscroll", navigaStayTop);

            document.attachEvent("onmousewheel", navigaStayTop);
            document.attachEvent("onscroll", navigaStayTop);

        }else{
            window.addEventListener("mousewheel", navigaStayTop,false);
            window.addEventListener("scroll", navigaStayTop,false);

            document.addEventListener("mousewheel", navigaStayTop,false);
            document.addEventListener("scroll", navigaStayTop,false);

        }
        //回到顶部
        var div1 = document.getElementById('div1');
        window.onscroll = function(){
            var t = window.pageYOffset;
            if (t>200) {
                div1.style.display = 'block';

            } else{
                div1.style.display = 'none';

            }
        }
        div1.onclick = function(){
            window.scrollTo(0,0);
        }


    }
    </script>
</head>
<body>
    <div class="main">
        <div class="content">1</div>
            <div id="nav" class="navigation">
                <div class="tab">概念</div>
                <div class="tab">设计</div>
                <div class="tab">功能</div>
                <div class="tab">操作系统</div>
                <div class="tab">技术规格</div>
                <div class="tab">购买方式</div>
                <div class="tab">付款方式</div>
            </div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
        <div class="content">9</div>
        <div class="content">10</div>
    </div>
    <div id="div1">回到顶部</div>
</body>
</html>
</html>